<template>
    <div class="commentTab">
        <div class="cate_model_container" v-if="showTagGroup">
            <div class="cate_model_scroll">
                <div class="cate_model_scroll_wrap">
                    <div class="cate_model_item selected">
                        <span class="tag_name">全部</span>
                        <span class="tag_num">117</span>
                    </div>
                    <div class="cate_model_item">
                        <span class="tag_name">最新</span>
                    </div>
                    <div class="cate_model_item">
                        <span class="tag_name">好评</span>
                        <span class="tag_num">106</span>
                    </div>
                    <div class="cate_model_item">
                        <span class="tag_name">近期差评</span>
                        <span class="tag_num">6</span>
                    </div>
                    <div class="cate_model_item">
                        <span class="tag_name">有图/视频</span>
                        <span class="tag_num">21</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="shop_score_container">
            <div class="shop_score">
                <div class="score_info">
                    <div class="score_total_score_container">
                        <div class="score_total_score">{{shopDetail.rating}}</div>
                        <div class="score_score_detail">
                            <div class="score_beyond_nearby_by"><span>{{shopDetail.rating_desc}}</span></div>
                            <div class="score_rating_start">
                                <div class="rating_wrapper">
                                    <div class="rating_gray">
                                        <div class="rating_emptyStar"></div>
                                    </div>
                                    <div class="rating_active" :style="'width: '+shopDetail.rating_percent+'%;'">
                                        <div class="rating_activeStar"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="score_item_detail">
                        <div class="score_item_detail_title">味道</div>
                        <div class="score_item_detail_score">{{shopDetail.rating_taste}}</div>
                    </div>
                    <div class="score_item_detail">
                        <div class="score_item_detail_title">包装</div>
                        <div class="score_item_detail_score">{{shopDetail.rating_packing}}</div>
                    </div>
                    <div class="score_item_detail score_separator_line"></div>
                    <div class="score_item_detail">
                        <div class="score_item_detail_title">配送满意度</div>
                        <div class="score_item_detail_score">
                            <span>{{shopDetail.rating_delivery}}</span>
                            <span class="score_item_detail_percent">%</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="score_tags">
                <div class="shop_tags_inner_container" v-if="shopDetail">
                    <div class="tag_item activeTag">
                        <span class="tag_name">全部</span>
                        <span class="tag_num">{{shopDetail.score_tags.all}}</span>
                    </div>
                    <div class="tag_item">
                        <span class="tag_name">最新</span>
                    </div>
                    <div class="tag_item">
                        <span class="tag_name">好评</span>
                        <span class="tag_num">{{shopDetail.score_tags.good}}</span>
                    </div>
                    <div class="tag_item">
                        <span class="tag_name">近期差评</span>
                        <span class="tag_num">{{shopDetail.score_tags.bad}}</span>
                    </div>
                    <div class="tag_item">
                        <span class="tag_name">有图/视频</span>
                        <span class="tag_num">{{shopDetail.score_tags.media}}</span>
                    </div>
                </div>
            </div>
            <div class="score_filter">
                <div class="score_checkbox">
                    <div class="score_checkbox_checked">
                        <img src="@/assets/img/icon/checked.png" alt="">
                    </div>
                    <div class="score_checkbox_normal" style="display:none;"></div>
                    <div>只看有内容的评价</div>
                </div>
            </div>
        </div>
        <div class="comment_list_container">
            <div class="shop_comment_cell_container" v-for="(item,index) in commentList" :key="item._id">
                <div class="food_evaluate_item_header fei__tip-off-layout">
                    <div class="food_evaluate_item_avatar">
                        <img src="@/assets/img/comment/61987b5720fa742769dd2765ef4acjpeg.jpeg" alt="">
                    </div>
                    <div class="food_evaluate_item_col2">
                        <div class="food_evaluate_item_username">e***7</div>
                        <div class="food_evaluate_item__vip" v-if="item.isVIP"><img src="https://gw.alicdn.com/imgextra/i3/O1CN01s3Oyeu1kZH2XpWCwH_!!6000000004697-55-tps-121-28.svg" alt=""></div>
                        <div class="food_evaluate_item__repurchase" v-if="item.isOldCustomer">回头客</div>
                        <div class="food_evaluate_item_time">{{item.create_time}}</div>
                    </div>
                    <div class="food_evaluate_item_tip_off_wrap" @click="openShowActionSheet">
                        <div class="food_evaluate_item_tip_off"><img src="@/assets/img/icon/more.png" alt=""></div>
                    </div>
                </div>
                <div class="esu_root">
                    <div class="esu_star_wrap">
                        <span class="esu_title">满意度</span>
                        <span class="esu_result rating_wrapper">
                            <div class="rating_gray">
                                <div class="rating_emptyStar"></div>
                            </div>
                            <div class="rating_active" :style="'width: '+item.commentRatingPercent+'%;'">
                                <div class="rating_activeStar"></div>
                            </div>
                        </span>
                    </div>
                    <div v-for="(commentTag,index) in item.commentTags" :key="index">
                        <span class="esu_title">{{commentTag.title}}</span>
                        <span class="esu_result">{{commentTag.result}}</span>
                    </div>
                    <!-- <div>
                        <span class="esu_title">包装</span>
                        <span class="esu_result">5星</span>
                    </div>
                    <div>
                        <span class="esu_title">配送</span>
                        <span class="esu_result">满意</span>
                    </div> -->
                </div>
                <div class="ect_root top">
                    <span class="ect_text_unit highlight" v-for="(highlight,index) in item.commentHighlight" :key="index">#{{highlight}}#</span>
                    <!-- <span class="ect_text_unit highlight">#荷包蛋#</span> -->
                    <span class="ect_text_unit">{{item.commentText}}</span>
                </div>
                <div class="food_evaluate_item_image_list big" style="margin-top: 0.28125rem; margin-bottom: 0.75rem;">
                    <div class="food_evaluate_item_image"><img src="@/assets/img/comment/comment-food-01.jpg" alt=""></div>
                </div>
                <div class="shop_comment_cell_recommend" style="margin-top: 0.24rem;" v-if="item.recommendFood!=''">
                    <div class="cscc_title">TA的点赞：</div>
                    <div class="cscc_sku">
                        <span class="shop_comment_cell_recommend_name">{{item.recommendFood}}</span>
                        <div class="comment_cell_more_icon"></div>
                    </div>
                    <div class="erl_root">
                        <div class="erl_recommend_icon"></div>
                        <div class="erl_text">有用{{item.thumbsUp?item.thumbsUp:''}}</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { reactive, ref, onMounted, toRefs } from 'vue';
import { getComments } from '@/api/shopDetail';
export default {
    name:'CommentTab',
    setup(props,context){
        const showActionSheet = ref(false);
        const actionSheet = reactive([{name:'我要举报'}]);
        const openShowActionSheet = () => {
            context.emit('open-show_action-sheet')
        }
        const showTagGroup = ref(false);

        const data = reactive({
            commentList:{}
        })
        const {commentList} = toRefs(data);
        const getCommentsFun = () => {
            getComments({id:props.shop_id}).then(res=>{
                console.log(res)
                commentList.value = res.data
            }).catch(error=>{
                console.log(error)
            })
        }
        onMounted(()=>{
            // 监听滚动条位置
            window.addEventListener('scroll',handleScroll,true);
            // console.log(document.querySelector('#tabArea').offsetTop);

            // 发送请求
            getCommentsFun();
        })
        const handleScroll = () => {
            var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
            // console.log(document.querySelector('.score_filter').getBoundingClientRect().top);
            // if(document.querySelector('.score_filter').getBoundingClientRect().top<142){
            //     showTagGroup.value = true;
            // }
            // else{
            //     showTagGroup.value = false;
            // }
        }
        return {
            showActionSheet,
            actionSheet,
            openShowActionSheet,
            showTagGroup,
            commentList,
        }
    },
    props:['showActionSheet','shop_id','shopDetail']
}
</script>

<style>
.commentTab{
    box-sizing: border-box;
    z-index: 1;
    padding: 0.5rem 0.75rem 0.6875rem;
    width: 100%;
    min-height: 547px;
    background-image: linear-gradient(180deg, #FBFBFB 0%, #F5F5F5 0.625rem);
    display: flex;
    flex-direction: column;
    position: relative;
}
.cate_model_container{
    position: fixed;
    top: 88px;
    left: 0;
    z-index: 50;
    box-sizing: border-box;
    padding: 0.75rem;
    width: 100vw;
    height: 3.375rem;
    background: #fff;
}
.cate_model_scroll{width: 100%;height: 100%;overflow: hidden;overflow-x: scroll;}
.cate_model_scroll::-webkit-scrollbar{display: none;}
.cate_model_scroll_wrap{display: flex;}
.cate_model_item{
    display: flex;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    margin-right: 0.5rem;
    padding: 0 0.75rem;
    height: 1.75rem;
    font-size: 0.75rem;
    border-radius: 0.5rem;
    background: #f3f3f3;
}
.cate_model_item.selected{
    font-weight: 500;
    background-color: rgba(2, 182, 253, 0.08);
    color: rgb(2, 182, 253);
}

.shop_score_container{margin-bottom: 0.5rem;border-radius: 0.5rem;overflow: hidden;background: #fff;}
.shop_score{box-sizing: border-box;padding: 1.0625rem 0.75rem 0 0.75rem;height: 3.6875rem;}
.score_info{display: flex;flex-wrap: nowrap;align-items: stretch;}
.score_total_score_container{display: flex;flex: 1;line-height: 1.5rem;}
.score_total_score{
    display: inline-block;
    height: 1.5rem;
    line-height: 1.5rem;
    font-weight: bold;
    font-size: 2rem;
    color: #FF6300;
}
.score_score_detail{
    position: relative;
    top: -0.125rem;
    margin-left: 0.40625rem;
    line-height: 1.5rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-content: space-between;
}
.score_beyond_nearby_by{
    margin-bottom: 0.3125rem;
    position: relative;
    top: 0.0625rem;
    height: 0.8125rem;
    line-height: 0.8125rem;
    font-size: 0.6875rem;
    color: #999;
}
.score_rating_start{height: 0.625rem;width: 3.625rem;margin-bottom: 0.0625rem;}
.rating_wrapper{position: relative;overflow: hidden;}
.rating_emptyStar{
    width: 3.625rem;
    height: 0.625rem;
    background-image: url('@/assets/img/icon/emptyStar.png');
    background-size: cover;
    background-repeat: no-repeat;
}
.rating_active{position: absolute;top: 0;left: 0;overflow: hidden;}
.rating_activeStar{
    width: 3.625rem;
    height: 0.625rem;
    background-image: url('@/assets/img/icon/activeStar.png');
    background-size: cover;
    background-repeat: no-repeat;
}
.score_item_detail{
    position: relative;
    top: -0.0625rem;
    margin-right: 0.625rem;
    height: 1.5625rem;
    line-height: 1.5625rem;
    display: flex;
    flex-direction: column;
}
.score_item_detail:last-child{margin-right: 0;margin-left: 0.75rem;}
.score_item_detail_title{height: 0.8125rem;line-height: 0.8125rem;font-size: 0.6875rem;color: #999;}
.score_item_detail_score{line-height: 1.25rem;font-size: 1rem;font-weight: 500;color: #333}
.score_separator_line{border: none;top: 0;border-left: 0.03125rem solid #EEEEEE;margin-right: 0;}
.score_item_detail_percent{font-size: 0.5625rem;}
.score_tags{
    box-sizing: border-box;
    padding: 0 0.75rem;
    width: 100%;
    background: #fff;
    display: flex;
    justify-content: flex-start;
    align-content: space-between;
    flex-wrap: wrap;
}
.shop_tags_inner_container{
    width: 100%;
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    align-content: space-between;
}
.tag_item{
    margin-right: 0.5rem;
    margin-bottom: 0.5rem;
    padding: 0 0.75rem;
    border-radius: 0.25rem;
    height: 1.75rem;
    text-align: center;
    display: flex;
    align-items: center;
    max-width: 100%;
    background: #f5f5f5;
}
.activeTag{font-weight: 500;background-color: rgba(2, 182, 253, 0.08);color: rgb(2, 182, 253);}
.tag_name, .tag_num{font-size: 0.75rem;line-height: 1rem;}
.tag_name{overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
.tag_num{margin-left: 0.1875rem;}
.score_filter{
    box-sizing: border-box;
    padding: 0.375rem 0 0.8125rem 0.75rem;
    width: 100%;
    font-size: 0.6875rem;
    color: #aaa;
    background: #fff;
}
.score_checkbox{
    line-height: 1.0625rem;
    font-size: 0.75rem;
    font-weight: normal;
    color: #999;
    display: flex;
    align-items: center;
}
.score_checkbox_checked{
    width: 1.0625rem;
    height: 1.0625rem;
    margin-right: 0.375rem;
    background-size: contain;
    background-repeat: no-repeat;
}
.score_checkbox_checked img{width: 100%;height: 100%;}
.score_checkbox_normal{
    box-sizing: border-box;
    width: 1.0625rem;
    height: 1.0625rem;
    margin-right: 0.375rem;
    border: 0.03125rem solid rgba(0,0,0,0.3);
    border-radius: 0.53125rem;
}

.comment_list_container{margin-bottom: 6.25rem;flex: 1;}
.shop_comment_cell_container{
    padding: 0.5rem 0.75rem;
    margin-bottom: 0.5rem;
    width: 100%;
    box-sizing: border-box;
    background: #fff;
    border-radius: 0.5rem;
}
.food_evaluate_item_header{padding: 0.5rem 0;display: flex;align-items: center;line-height: 1;}
.food_evaluate_item_avatar{width: 1.5rem;height: 1.5rem;border-radius: 0.75rem;overflow: hidden;}
.food_evaluate_item_avatar img{width: 100%;height: 100%;}
.food_evaluate_item_username{margin: 0 0.25rem;font-size: 0.875rem;font-weight: 700;}
.food_evaluate_item__vip{width: 3.7813rem;height: 0.875rem;}
.food_evaluate_item__vip img{width: 100%;height: 100%;}
.food_evaluate_item__repurchase{
    margin-left: 0.25rem;
    width: 2.25rem;
    height: 0.875rem;
    line-height: 1;
    font-size: 0.625rem;
    font-weight: 400;
    color: #fff;
    border-radius: 0.1875rem;
    background: rgb(2, 182, 253);
    display: flex;
    align-items: center;
    justify-content: center;
}
.food_evaluate_item_time{font-size: 0.75rem;color: #999;flex: 1;}
.fei__tip-off-layout .food_evaluate_item_avatar{width: 2.25rem;height: 2.25rem;border-radius: 50%;}
.fei__tip-off-layout .food_evaluate_item_username{margin-left: 0.5rem;}
.fei__tip-off-layout .food_evaluate_item_time{text-align: left;margin: 0.375rem 9.375rem 0 0.5rem;white-space: nowrap;}
.food_evaluate_item_tip_off_wrap{
    width: 1.5rem;
    height: 1.5rem;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}
.food_evaluate_item_tip_off{width: 1rem;height: 1rem;}
.food_evaluate_item_tip_off img{width: 100%;height: 100%;}
.esu_root{
    display: flex;
    justify-content: flex-start;
    align-items: stretch;
    position: relative;
    padding: 0.53125rem 0;
    width: 100%;
    line-height: 1;
    font-size: 0.75rem;
    color: #999;
}
.esu_star_wrap{display: flex;align-items: center}
.esu_title{display: inline-block;}
.esu_result{display: inline-block;margin-right: 0.5rem;}
.rating_wrapper{position: relative;overflow: hidden;}
.ect_root{
    line-height: 1.375rem;
    text-align: left;
    font-size: 0.875rem;
    color: #191919;
    word-break: break-all;
}
.ect_root.top{margin-top: -0.25rem;}
.ect_text_unit{line-break: anywhere;word-break: break-word;}
.ect_text_unit.highlight{margin: 0 0.25rem;color: rgb(2, 182, 253);}
/* 评论-图片 */
.food_evaluate_item_image_list{
    margin-right: -0.25rem;
    display: flex;
    flex-wrap: wrap;
    width: calc(100% + 0.25rem);
}
.food_evaluate_item_image{
    border-radius: 0.25rem;
    margin-right: 0.24375rem;
    margin-bottom: 0.25rem;
    overflow: hidden;
}
.food_evaluate_item_image img{width: 100%;height: 100%;object-fit: cover;object-position: center center;}
.big .food_evaluate_item_image{width: 10.0938rem;height: 10.0938rem;}
.food_evaluate_item_col2{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    flex: 1;
}
.shop_comment_cell_recommend{
    display: flex;
    align-items: center;
    font-size: 0.75rem;
    line-height: 1.5rem;
    margin-bottom: 0.5rem;
}
.cscc_title{flex-shrink: 0;color: #191919;}
.cscc_sku{
    margin-right: 1.125rem;
    padding: 0 0.375rem;
    height: 1.5rem;
    line-height: 1;
    border-radius: 0.25rem;
    display: flex;
    align-items: center;
    overflow: hidden;
    background: rgba(2, 182, 253, 0.08);
}
.shop_comment_cell_recommend_name{
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: rgb(2, 182, 253);
}
.comment_cell_more_icon{
    margin: 0 0.25rem 0 0.25rem;
    width: 0.625rem;
    height: 0.625rem;
    flex-shrink: 0;
    background-size: contain;
    background-repeat: no-repeat;
    background-image: url('@/assets/img/icon/right-02b6fd.png');
    opacity: 0.5;
}
.erl_root{
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex: 1 0 auto;
}
.erl_recommend_icon{
    position: relative;
    margin-right: 0.25rem;
    top: -1px;
    width: 1rem;
    height: 1rem;
    background: center/contain no-repeat;
    background-image: url('@/assets/img/icon/good.png');
}
.erl_recommend_icon.fill{background-image: url('@/assets/img/icon/good-fill.png');}
.erl_text{flex-shrink: 0;}
</style>